<template>
    <ZZDialog class="settings-localtion" title="坐标定位" @close="onClose()">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="50px" class="top_15">
            <el-form-item label="经度" prop="pass">
                <el-input-number v-model="ruleForm.lon" :min="-180" :max="180" :precision="6" :step="0.0001" />
            </el-form-item>
            <el-form-item label="纬度" prop="checkPass">
                <el-input-number v-model="ruleForm.lat" :min="-90" :max="90" :precision="6" :step="0.0001" />
            </el-form-item>
            <el-form-item label="高度" prop="age">
                <el-input-number v-model="ruleForm.height" />
            </el-form-item>
            <div class="center">
                <el-button type="primary" @click="submitForm()">确认</el-button>
            </div>
        </el-form>
    </ZZDialog>
</template>
  
<script>
import ZZDialog from '../../common/ZZDialog.vue';
import imgTest from "../../assets/location1.png"

export default{
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            markerXY:undefined,
            ruleFormRef:undefined,
            ruleForm:{
                lon: 120.009630,
                lat: 30.276335,
                height: 50,
            }
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    methods:{
        addundapteMaker(val) {
            var position = Cesium.Cartesian3.fromDegrees(val.x, val.y, (val.z || 0));

            if (this.markerXY == null) {
                this.markerXY = this.viewer.entities.add({
                    name: '坐标拾取',
                    position: position,
                    billboard: {
                        image: imgTest,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                        scale: 0.6
                    }
                });
            }
            else {
                this.markerXY.position = position;
            }
            this.viewer.zz.centerAt({ x: val.x, y: val.y });

        },
        centerAt() {
            if (this.viewer) {
                let mpt = this.viewer.zz.point2map({ x: Number(this.ruleForm.lon), y: Number(this.ruleForm.lat), z: Number(this.ruleForm.height) });
                this.addundapteMaker(mpt);
            }
        },
        submitForm () {
            if (!this.$refs.ruleFormRef) return
            this.centerAt();
            this.$refs.ruleFormRef.validate((valid) => {
                if (valid) {
                    console.log('submit!')
                } else {
                    console.log('error submit!')
                    return false
                }
            })
        },
        onClose(){
            if (this.markerXY) {
                this.viewer.entities.remove(this.markerXY);
                this.markerXY = null;
            }
            this.$emit('close') 
        },

    },
}

</script>
  
<style>
.settings-localtion {
    position: absolute;
    top: 100px;
    right: 150px;
    width: 260px;
}
.top_15{
    padding-top: 15px;
}
.el-form-item__label{
    color: white;
}
.center{
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.el-button{
    color: white ;
    background-color: #409eff;
}
</style>